<%@ page language="java" pageEncoding="utf-8" %>
<html>
<head>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="${pageContext.request.contextPath}/css/font-awesome.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>

<script type="text/javascript">
    let begin = 0;
    let end = 15;//总页数

    $(function () {
        $.post("/getUserInfo", function (responseData) {
            console.log(responseData);
            if (responseData.status == -1) {
                $("#userInfo").css("display", "none");
                $("#login").css("display", "block").click(function () {
                    window.location = "${pageContext.request.contextPath}/login.jsp"
                });
            } else if (responseData.status == 0) {
                $("#login").css("display", "none");
                $("#userInfo").css("display", "block");
                $("#username").text(responseData.user.userName);
                console.log(responseData.user.userName);
                $("#publish_content").click(function () {
                    window.location = "${pageContext.request.contextPath}/publish_content.jsp"
                })
            }
        }, "JSON");

        $.post("/contentList", {num: begin}, function (responseData) {
            console.log(responseData);
            let datas = responseData.data;
            for (let i = 0; i < datas.length; i++) {
                let publishTime = datas[i].publishTime;
                let date = new Date(publishTime);
                let e = $(
                    "<div style=\"margin-bottom: 10px;box-shadow: 0px 1px 3px #2d2c2c\">\n" +
                    "            <div>\n" +
                    "                <div style=\"font-size: 20px; padding: 10px\">\n" +
                    "                    <span id=\"name\">" + datas[i].user.userName + "</span>\n" +
                    "                </div>\n" +
                    "                <div style=\"text-align: center;font-size: 20px\" id=\"content\">" + datas[i].content + "</div>\n" +
                    "            </div>\n" +
                    "            <div style=\"text-align: right;padding: 10px\">" + date + "<i class=\"fa fa-heart\" style=\"margin: 10px\" onclick='likeclick(" + datas[i].id + ")' id=\" " + datas[i].id + "+ \"></i> " + datas[i].likeCount + "</div>\n" +
                    "        </div>"
                );

                $("#contentList").append(e);
            }

        }, "JSON");
        begin=end;
        end=begin+15;

        $.post("/contentTen", function (responseData) {
            console.log(responseData);
            let datas = responseData.ten;
            for (let i = 0; i < 10; i++) {
                let publishTime = datas[i].publishTime;
                let date = new Date(publishTime);
                let e = $(
                    "<div style=\"margin-bottom: 10px;box-shadow: 0px 1px 3px #2d2c2c\">\n" +
                    "            <div>\n" +
                    "                <div style=\"font-size: 20px; padding: 10px\">\n" +
                    "                    <span id=\"name\">" + datas[i].user.userName + "</span>\n" +
                    "                </div>\n" +
                    "                <div style=\"text-align: center;font-size: 20px\" id=\"content\">" + datas[i].content + "</div>\n" +
                    "            </div>\n" +
                    "            <div style=\"text-align: right;padding: 10px\">" + date + "<i class=\"fa fa-heart\" style=\"margin: 10px\" onclick='likeclick(" + datas[i].id + ")' id=\" " + datas[i].id + "+ \"></i> " + datas[i].likeCount + "</div>\n" +
                    "        </div>"
                );
                $("#contentTen").append(e);
            }
        }, "JSON");

        function getScrollTop() {
            let scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        }

        function getClientHeight() {
            let clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight) {
                clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
            } else {
                clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
            }
            return clientHeight;
        }

        //获取文档完整的高度
        function getScrollHeight() {
            let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
            if (document.body) {
                bodyScrollHeight = document.body.scrollHeight;
            }
            if (document.documentElement) {
                documentScrollHeight = document.documentElement.scrollHeight;
            }
            scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
            return scrollHeight;
        }

        //滚动事件触发
        window.onscroll = function () {
            console.log(getScrollTop() + getClientHeight())
            if (getScrollTop() + getClientHeight() + 1 == getScrollHeight()) {
                //这里向后台进行数据请求（第一页数据就是1，第二页就是2，然后将请求回来的数组（处理成数组）拼接起来）
                $.post("/contentList", {num: begin}, function (responseData) {

                    console.log(responseData);
                    let datas = responseData.data;
                    for (let i = 0; i < datas.length; i++) {
                        let publishTime = datas[i].publishTime;
                        let date = new Date(publishTime);
                        let e = $(
                            "<div style=\"margin-bottom: 10px;box-shadow: 0px 1px 3px #2d2c2c\">\n" +
                            "            <div>\n" +
                            "                <div style=\"font-size: 20px; padding: 10px\">\n" +
                            "                    <span id=\"name\">" + datas[i].user.userName + "</span>\n" +
                            "                </div>\n" +
                            "                <div style=\"text-align: center;font-size: 20px\" id=\"content\">" + datas[i].content + "</div>\n" +
                            "            </div>\n" +
                            "            <div style=\"text-align: right;padding: 10px\">" + date + "<i class=\"fa fa-heart\" style=\"margin: 10px\" onclick='likeclick(" + datas[i].id + ")' id=\" " + datas[i].id + "+ \"></i> " + datas[i].likeCount + "</div>\n" +
                            "        </div>"
                        );

                        $("#contentList").append(e);
                    }
                }, "JSON");
                begin=end;
                end=begin+15;
            }
        }
    });

    function likeclick(id) {
        console.log(id);
        $.post("/likeCount", {contentid: id});
    }

</script>

<div class="row" style="height: 100%; padding-top: 100px" id="main">
    <div class="col-xs-6 col-md-4" style="text-align: right">
        <h2>用户信息</h2>
        <div id="user">
            <div id="userInfo">
                <span style="font-size: 20px">用户：</span><span id="username" style="font-size: 20px"></span>
                <div id="publish_content" style="color: red ; font-weight: bolder;font-size: 20px">发布内容</div>
            </div>
            <div id="login">登录</div>
        </div>
    </div>
    <div class="col-xs-6 col-md-4" id="contentList">

    </div>
    <div class="col-xs-6 col-md-4" id="contentTen">
        <h2>点赞数前十</h2>

    </div>
</div>
</body>
</html>
